<template>
  <div class="z-filter-opt">
    <template v-for="item in operates">
      <z-button
        class="z-opt"
        :key="item.label"
        v-if="item.type === 'button'"
        @click="onClick(item)"
        >{{ item.label }}</z-button
      >
      <z-dropdown
        v-else-if="item.type === 'down'"
        class="z-opt"
        :key="item.label"
        :operate="item"
        @command="onClick"
      />
    </template>
  </div>
</template>

<script>
import ZButton from "../ZBase/ZButton";
import ZDropdown from "../ZBase/ZDropdown";
export default {
  name: "ZFilterOperate",
  components: {
    ZButton,
    ZDropdown,
  },
  props: {
    operates: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onClick(opt) {
      this.$emit("click", opt);
    },
  },
};
</script>

<style lang="scss" scoped>
.z-filter-opt {
  .z-opt {
    margin-right: 10px;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
